<template>
  <div class="toolBar">
    <div class="toolbarLeft" v-if="leftToolToolData.length>0">
      <el-button
        :type="item.type ||'primary'"
        :icon="item.icon"
        v-for="(item,index) in leftToolToolData"
        :key="index"
        size="mini"
        @click="item.click"
      >{{item.text}}</el-button>
    </div>
    <div class="toolBarRight">
      <el-button-group>
        <el-tooltip
          v-for="item in rightToolData"
          :key="item.type"
          effect="dark"
          :content="item.content"
          placement="top-start"
        >
          <el-button
            :type="item.color"
            :icon="item.icon"
            size="small"
            @click="$emit('rightBtnClick',item)"
            v-if="item.type!=='hiddenColumn'"
          ></el-button>
          <el-popover placement="bottom" trigger="click" width="150" v-else>
            <el-button slot="reference" icon="el-icon-view" size="small" class="referenceBtn"></el-button>
            <el-checkbox-group v-model="showedFields" @change="changeFun">
              <el-checkbox
                style="padding: 6px 0"
                v-for="(item, index) in fields"
                :key="index"
                :label="item.prop"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-popover>
        </el-tooltip>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "toolBar",
  props: {
    fields: {
      type: Array,
      default: () => []
    },
    leftToolToolData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showedFields: [],
      rightToolData: [
        { type: "hiddenSearch", content: "隐藏搜索栏", icon: "el-icon-search", color: "primary" },
        { type: "refresh", content: "刷新数据", icon: "el-icon-refresh-right" },
        { type: "highSearch", content: "高级搜索", icon: "el-icon-menu" },
        { type: "hiddenColumn", content: "隐藏列", icon: "el-icon-view" }
      ]
    };
  },
  methods: {
    changeFun (val) {
      this.$emit("changFun", val);
    },
    setRightToolData (data) {
      this.rightToolData = data;
    }
  }
};
</script>

<style lang="less" scoped>
.toolBar {
  width: 100%;
  height: 45px;
  background: #fff;
  overflow: hidden;

  // justify-content: space-between;
  padding: 0 10px;
  .toolBarRight {
    float: right;
    position: relative;
    top:7px;
  }
  .toolbarLeft {
    float: left;
    position: relative;
  }
  /deep/ .referenceBtn {
    margin-left: 1px;
  }
}
</style>
